<!--
*- coding = utf-8 -*-
#@Time : 2022/10/13 15:55
#@Author : CSDN 沉默小管
#@File : useClass.ts
#@web  : golangblog.blog.csdn.net
#@Software: WebStorm
-->
<template>
  <div class="img-dialog">
    <div class="img-dialog-mask"></div>
    <div class="img-dialog-curImg">
      {{curImgIndex+1}} / {{props.imgList.length??0}}
    </div>
    <!--    关闭窗口-->
    <div @click="handleClose" class="close u-f u-f-ac u-f-ajc" style="width:44px;height:44px;">
      <i class="icon image-lazy-iconfont icon-chacha" style="font-size:40px;"></i>
    </div>
    <!--    上一个-->
    <div @click="handlePrevious" class="previous u-f u-f-ac u-f-ajc" style="width:60px;height:60px;">
      <i class="icon image-lazy-iconfont icon-icprevious" style="font-size:58px;"></i>
    </div>
    <!--    下一个-->
    <div @click="handleNext" class="next u-f u-f-ac u-f-ajc" style="width:60px;height:60px;">
      <i class="icon image-lazy-iconfont icon-icnext" style="font-size:58px;"></i>
    </div>
    <!--图片操作控制台-->
    <div class="operationConsole u-f u-f-ac u-f-aja">
      <div @click="handleZoomOutImage">
        <i class="icon image-lazy-iconfont icon-suoxiao" style="font-size:28px;"></i>
      </div>
      <div @click="handleEnlargeImage">
        <i class="icon image-lazy-iconfont icon-fangda" style="font-size:28px;"></i>
      </div>
      <div @click="handleFullScreen" style="width:40px;" class="u-f u-f-ac u-f-ajc">
        <i class="icon image-lazy-iconfont icon-24gl-fullScreenEnter2" style="font-size:28px;"></i>
      </div>
      <div @click="handleCounterRota">
        <i class="icon image-lazy-iconfont icon-xiangzuoxuanzhuan" style="font-size:28px;"></i>
      </div>
      <div @click="handleClockwiseRota">
        <i class="icon image-lazy-iconfont icon-xiangyouxuanzhuan" style="font-size:28px;"></i>
      </div>
    </div>
    <!-- 图片-->
    <div class="img-dialog-img u-f u-f-ac u-f-ajc">
      <img
          class="img"
          :src="curImg"
      >
    </div>
  </div>
</template>

<script setup lang="ts">

import {useFunc} from "./hooks/useFunc";

let props = defineProps({
  imgList:{
    type:Array,
    default:[]
  }
})
let {curImgIndex,curImg,handleClose,handlePrevious,handleNext,handleCounterRota,handleClockwiseRota,handleFullScreen,handleEnlargeImage
  ,handleZoomOutImage} = useFunc(props)

</script>

<style scoped lang="less">
.icon{
  cursor:pointer;
}
.img-dialog{
  transition: opacity 0.5s;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width:100%;
  height: 100%;
  z-index: 2010;
  &-curImg{
    color:white;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50px;
    text-align: center;
  }
  &-mask{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .5;
    background: #000;
  }
  &-img{
    max-width:300px;
    width:auto;
    max-height:300px;
    height:auto;
    z-index:2011;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    .img{
      width: 100%;
      height: 100%;
    }
  }
  .close{
    color:#fff;
    cursor:pointer;
    position:absolute;
    right:50px;
    top:40px;
  }
  .previous{
    color:#fff;
    cursor:pointer;
    position:absolute;
    left:30px;
    top: 50%;
    transform: translateY(-50%);
  }
  .next{
    color:#fff;
    cursor:pointer;
    position:absolute;
    right:30px;
    top: 50%;
    transform: translateY(-50%);
  }
  .operationConsole{
    z-index: 2022;
    background-color: #cfd3dc;
    padding: 10px 25px;
    border-color: #fff;
    border-radius: 22px;
    width:230px;
    position:absolute;
    bottom:50px;
    left:50%;
    transform: translate(-50%);
  }
}
</style>
